#@adminLayout() #define main()
<script src="#(ctx)/static/antvx6/js/x6.js" type="text/javascript"></script>
<script src="#(ctx)/static/antvx6/js/x6-node.js" type="text/javascript"></script>

<link href="#(ctx)/static/css/timeline.min.css" rel="stylesheet"/>
<style type="text/css">
	.form-group {
		margin-bottom: 5px;
	}

	.ibox-content {
		padding: 10px;
	}

	.timeline .timeline-item > .timeline-event .timeline-body {
		padding: 0px 5px;
	}

	.timeline .timeline-item > .timeline-event .timeline-footer {
		padding: 0px 5px;
	}

	.timeline .timeline-item > .timeline-event .timeline-heading h4 {
		padding: 0px 5px;
		font-weight: bold;
	}

	.timeline.timeline-single-column.timeline:before {
		left: 12px;
	}

	.timeline.timeline:before {
		left: 12px;
	}

	.timeline.timeline-single-column.timeline .timeline-item > .timeline-point {
		left: 12px !important
	}

	.timeline.timeline-single-column.timeline .timeline-item,
	.timeline.timeline-single-column.timeline .timeline-item.timeline-item-right,
	.timeline.timeline-single-column.timeline .timeline-item:nth-of-type(even):not(.timeline-item-left) {
		padding-left: 40px
	}

	.opinion {
		padding: 0px 10px
	}

	.span_box{
		width: 100px;
		height: 30px;
		font-size: 12px;
		color: #000000;
		padding: 5px;
		border: #5F95FF 1px solid;
	}
	.span
	{
		background: #EFF4FF;
	}
	.span_red
	{
		background: #92D050;
	}
	.span_grey
	{
		background: #cccccc;
	}
</style>
<body class="gray-bg">
	<div class="container-div" style="padding:0px;margin:0px;">
	<div class="tabs-container">
       <ul class="nav nav-tabs" id="mytab">
           <li class="active" data-id="tab-1"><a data-toggle="tab" href="#tab-1" aria-expanded="true" ><i class="fa fa-folder-open fa-lg" style="color:#ffffcc" aria-hidden="true"></i> 流程图</a>
           </li>
           <li class="" data-id="tab-2"><a data-toggle="tab" href="#tab-2" aria-expanded="false"><i class="fa fa-folder-open fa-lg" style="color:#ffffcc" aria-hidden="true"></i> 审批历史</a>
           </li>
       </ul>
       <div class="tab-content">
           <div id="tab-1" class="tab-pane active">
               <div class="panel-body" style="padding-top:0px;">
				
					<div class="row" style="padding:0px;margin:0px;">
						<div class="col-sm-2">
						<span class="span_box span_red">待处理</span>
						</div>
						<div class="col-sm-2">
						<span class="span_box span">未处理</span>
						</div>
						<div class="col-sm-2">
					 	<span class=" span_box span_grey">已处理</span>
						</div>
					</div>

				   <div id="graph-container" style="width: 100%;height: 100%"></div>
                 </div>
             </div>
             <div id="tab-2" class="tab-pane">
                 <div class="panel-body">
                 <div class="row" style="padding:0px;margin:0px;">
                 	#if(node_type!='end-node')
					下一步处理节点：【<b>#(node_name)</b>】
					处理人：【<b>#(users)</b>】
					#end
                 </div>
                 <div class="container" style="width:50%">
                 	<div class="timeline timeline-single-column">
						#for(item:hislist)
						<!--<span class="timeline-label">
						<span class="label label-primary">#(item.create_time)</span>
						</span>-->
						<div class="timeline-item">
							#if(item.description.indexOf('发回')==-1||item.description==null)
							<div class="timeline-point timeline-point-success">
								<i class="fa fa-star" style></i>
							</div>
							#else
							<div class="timeline-point timeline-point-warning">
								<i class="fa fa-star" style></i>
							</div>
							#end
							<div class="timeline-event">
								<div class="timeline-heading">
									<h4>#(item.node_id)</h4>
								</div>
								<div class="timeline-body">
									<p>#(item.description)</p>
								</div>
								<div class="timeline-footer">
									<p class="text-right">#(item.create_by)</p>
									<p class="text-right">#(item.create_time)</p>
								</div>
							</div>
						</div>
						#end
					</div>
				</div>
                 </div>
             </div>
         </div>
     </div>
	
	</div>

	<script type="text/javascript">
		var wf_id="#(wf_id)";
		var task_id="#(task_id)";
		var node_id="#(node_id)";
		var prefix ="#(ctx)/jwflow";

		$(function () {
			loadJson();
		});
		// #region 初始化画布
		const graph = new X6.Graph({
			container: document.getElementById('graph-container'),
			width: 1800,
			height: 1000,
			grid: true,
			mousewheel: {       //按住 ctrl键鼠标滚轮控制放大缩小
				enabled: true,
				zoomAtMousePosition: true,
				modifiers: 'ctrl',
				minScale: 0.5,
				maxScale: 3,
			},
			connecting: {
				snap: true,
				allowBlank: false,
				allowLoop: false,
				highlight: true,
				router: {
					name: 'manhattan',       //连接线根据位置自动换节点
					args: {
						padding: 1,
					},
				},
				connector: {
					name: 'rounded',
					args: {
						radius: 8,
					},
				},
				anchor: 'center',
				connectionPoint: 'anchor',
				allowBlank: false,
				snap: {
					radius: 20,
				},
				createEdge() {
					return new X6.Shape.Edge({
						attrs: {
							line: {
								stroke: '#A2B1C3',
								strokeWidth: 2,
								targetMarker: {
									name: 'block',
									width: 12,
									height: 8,
								},
							},
						},
						zIndex: 0,
					})
				},
				validateConnection({targetMagnet}) {
					return !!targetMagnet
				},
			},
			highlighting: {
				magnetAdsorbed: {
					name: 'stroke',
					args: {
						attrs: {
							fill: '#5F95FF',
							stroke: '#5F95FF',
						},
					},
				},
			},
			resizing: true,
			rotating: false,
			selecting: {
				enabled: true,
				rubberband: true,
				showNodeSelectionBox: true,
			},
			snapline: true,
			keyboard: true,
			clipboard: true,
			history: {
				enabled: true,
				ignoreAdd: true,
				ignoreRemove: true,
				ignoreChange: false,
			},
		})
		// #endregion

		//双击修改内容
		graph.on('cell:dblclick', ({cell, e}) => {
			const isNode = cell.isNode()
			const name = cell.isNode() ? 'node-editor' : 'edge-editor'
			cell.removeTool(name)
			cell.addTools({
				name,
				args: {
					event: e,
					attrs: {
						backgroundColor: isNode ? '#EFF4FF' : '#FFF',
					},
				},
			})
		})


		function changeHitory() {
			if (graph.isHistoryEnabled()) {
				graph.disableHistory()
			} else {
				graph.enableHistory()
			}
		}

		function loadJson()
		{
			$.getJSON(prefix+"/getJsonView",{id:wf_id,task_id:task_id},function(data){
				if(data)
				{
					graph.fromJSON(data);

					initNodes();
				}
			});
		}

		function initNodes()
		{
			var nodes=graph.model.getNodes();
			//非流动的效果是节点中查找
			var node = nodes.find(item => {return item.id == node_id});

			node.attr('body/fill', '#92D050');

			var hislist= #(hisNodes);
			$.each(hislist, function(i, field) {
				node = nodes.find(item => {return item.id == field.node_id});
				node.attr('body/fill', '#cccccc');
			});
		}

	</script>
</body>
#end
